<template>
  <div class="film-info" @click="skipDeail">
    <div class="left">
      <div class="film-info-top" v-if="ietmFilmInfo.actors">
        <span class="filmInfo-name">{{ ietmFilmInfo.name }}</span>
        <span class="actor-grade">{{ ietmFilmInfo.grade }}分</span>
      </div>
      <div class="film-info-center" v-show="ietmFilmInfo.actors">
        <span>{{ ietmFilmInfo.category }}&nbsp;|&nbsp;</span>
        <span>{{ ietmFilmInfo.runtime }} 分钟&nbsp;|&nbsp;</span>
        <span>{{ ietmFilmInfo.director }} &nbsp;|&nbsp;</span>
        <span>{{ allActor }}</span>
      </div>
    </div>
    <p class="iconfont icon-jiantou"></p>
    <triangle class="triangle" />
  </div>
</template>

<script>
export default {
  name: 'FilmInfo',
  props: ['ietmFilmInfo'],
  computed: {
    allActor() {
      return this.ietmFilmInfo.actors ? this.ietmFilmInfo.actors.map(actor => actor.name).join(' ') : []
    }
  },
  methods: {
    skipDeail() {
      this.$router.push(`/films/${this.ietmFilmInfo.filmId}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.film-info {
  height: 0.8rem;
  width: 100%;
  background: #fff;
  padding: 0.15rem;
  position: relative;
  align-items: center;
  border-bottom: 0.5px solid #eee;

  .left {
    text-align: center;
    .film-info-top {
      font-size: 0.15rem;
      color: #191a1b;
      padding-right: 0.05rem;
      margin-bottom: 10px;
      text-align: center;
      line-height: 18px;
      .filmInfo-name {
        margin-right: 0.08rem;
      }
      .actor-grade {
        font-size: 16px;
        font-style: italic;
        color: #ffb232;
      }
    }
    .film-info-center {
      height: 18px;
      color: #797d82;
      font-size: 13px;
      padding: 0 8%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .iconfont {
    font-size: 10px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .triangle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -0.2rem;
  }
}
</style>